<template>
  <div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-barstack
          :xData="titleData13"
          :value="chart_bar_data13"
          :text="papersText"
          :barWidth="bar13"
          :loading="loading"
          :rotate="rotate13"
          style="height: 650px"
          :legendList="legendData13"
        ></chart-barstack>
      </Col>
      <Col span="5">
          <Form label-position="top" class="inputs">
            <Divider orientation="left">图表名称</Divider>
            <div style="margin-bottom: 40px">
              <FormItem>
                <Input v-model="papersText" placeholder="请输入图表名称" />
              </FormItem>
            </div>
            <div style="margin-bottom: 40px">
              <Divider orientation="left">legend名称</Divider>
              <draggable v-model="chart_bar_data13">
                <transition-group>
                  <FormItem
                    v-for="(item, index) in chart_bar_data13"
                    :key="index"
                  >
                    <Input v-model="item.name"></Input>
                  </FormItem>
                </transition-group>
              </draggable>
            </div>
            <Divider orientation="left">柱子宽度（0-100）</Divider>
            <FormItem>
              <Input v-model="bar13" placeholder="请输入机构名角度(0-360)" />
            </FormItem>
            <Divider orientation="left">年份角度（0-360）</Divider>
            <FormItem>
              <Input v-model="rotate13" />
            </FormItem>
          </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import ChartBarstack from "@/components/charts/stack_bar.vue";
import draggable from 'vuedraggable'
export default {
  name: "stackbar",
  components: {
    ChartBarstack,
    draggable
  },
  data() {
    return {
      loading: false,
      bar13: '30',
      legendData13: [],
      papersText: 'bar图表名称',
      titleData13: ['2015年','2016年','2017年','2018年','2019年'],
      rotate13: '45',
      chart_bar_data13: [
        {name: '上海',value: {0:[0.1,0.2,0.3,0.1,0.4],1:[0.2,0.2,0.3,0.1,0.4],2:[0.7,0.6,0.4,0.8,0.2]}},
        {name: '北京',value: {0:[0.1,0.2,0.3,0.1,0.4],1:[0.2,0.2,0.3,0.1,0.4],2:[0.7,0.6,0.4,0.8,0.2]}},
        {name: '深圳',value: {0:[0.1,0.2,0.3,0.1,0.4],1:[0.2,0.2,0.3,0.1,0.4],2:[0.7,0.6,0.4,0.8,0.2]}},
        {name: '广州',value: {0:[0.1,0.2,0.3,0.1,0.4],1:[0.2,0.2,0.3,0.1,0.4],2:[0.7,0.6,0.4,0.8,0.2]}},
        ]
    }
  },
  methods: {},
};
</script>
